<script setup lang="ts">
import { reactive, onMounted,ref,watch } from 'vue'
import { useAppStore } from '@/store'
import { useLoadingBar,useNotification  } from 'naive-ui'
import { useRouter } from 'vue-router'
import { goto,time_format } from '@/utils/comm'
import { ChevronDownOutline,EaselOutline,HeartOutline,HeartSharp,CaretForwardCircleOutline,LogoStackoverflow,NewspaperOutline} from '@vicons/ionicons5'
import Comic from '@/layouts/comic.vue'
import Video from '@/layouts/video.vue'
import Animes from '@/layouts/animes.vue'
import { _detail, _home } from '@/api/api'
import { useRequest } from 'alova'

const notification = useNotification()
const store = useAppStore()
const loadingBar = useLoadingBar()
const router = useRouter();
loadingBar.start()

const data =  reactive({
  loading: true,
  pge:1,
  eps: {} as any,
  fav_state:0,
  comic_id:"" as any,
  type:"" as any,
  eps_cnt:1,
  ep_firstid:"",
  his_name:"开始阅读",
  his_time:"",
  opt:0.2,
  max_height:0,
  max_status:false,
  backcolor:store.thems?.dark?"45,45,45":"255,255,255",
  drawer:false,
  ep_id:"",
  down_icon:true,
  ep_count:1,
  thems:{} as any,
  scrolltop:0,
  innerWidth:800
});

data.comic_id = router.currentRoute.value.query.id
data.type = router.currentRoute.value.query.type
data.thems = store.thems

if(!data.comic_id){
  let item={
    path:"/home"
  }
  goto(item)
}

const on_read = (ep:any) =>  {
  data.drawer = true
  data.ep_id = ep
  on_esc()
}

const on_select_ep = (ep:any) =>  {
  if(data.type==1){
    on_read(ep)
  }else{
    data.comic_id = ep
    on_refresh()
  }  
}

async function on_refresh(){
      const { onSuccess }  = useRequest(_home.getEps({
        id: data.comic_id, 
        type: data.type, 
      }))
      onSuccess((res:any) => {
        setTimeout(() => {
          loadingBar.finish()
        }, 200)
        data.eps = res.data
        data.ep_count =res.data.ep_list.length 
        if(data.type==1){
          data.ep_firstid =res.data.ep_list[0].id
          data.scrolltop = data.eps.scrolltop
          if(data.eps.his_ep_id){
            data.ep_firstid=data.eps.his_ep_id
            data.his_name="继续阅读"+data.eps.his
          }
        }else{
          data.ep_firstid =data.comic_id
          data.his_time=data.eps.his;
          if(data.eps.his){  
            data.his_name="上次观看到"+time_format(data.his_time)
          }else{
            data.his_name="开始阅读"
          }
        }
        data.eps_cnt = res.data.ep_list.length
        data.loading = false
      });


}

async function on_fav(id:string){
      const { onSuccess }  = useRequest(_detail.fav_add({
        comic_id: id, 
        type: data.type, 
      }))
      onSuccess((res:any) => {
        msg(res.data.message)
        data.eps.fav_state = res.data.fav_state
      });  
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}

const on_scroll = (event:any) =>  {
  let scrollBottom =event.target.scrollHeight -event.target.scrollTop -event.target.clientHeight;
  if(!data.max_status){
    data.max_height = scrollBottom
    data.max_status= true
  }
  data.opt = (data.max_height-scrollBottom)/data.max_height 
  if(!store.thems?.dark){
    data.opt = data.opt>0.6?0.6:data.opt
  }
  if(data.opt>0){
    data.down_icon = false
  }else{
    data.down_icon = true
  }
}

const list_ref = ref<any>({});
const go_down = () =>  {
  list_ref.value.scrollTo({
      top: 500,
      left: 0,
      behavior: "smooth"
    }
  )
}

const ref_comic = ref<any>({});
const ref_video = ref<any>({});
const ref_animes = ref<any>({});
const on_close = () =>  {
  if(data.type==1){
    ref_comic.value.add_his();
  }
  if(data.type==2){
    ref_video.value.add_his();
  }
  if(data.type==3){
    ref_animes.value.add_his();
  }
  on_esc()
}

const on_esc = () =>  {
  data.thems.esc_btn = !data.drawer//解决esc按钮冲突
  store.setthems(data.thems)
}

const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.innerWidth = window.innerWidth 
  }
}

watch(
  () => JSON.stringify(store.thems) ,(newValue, oldValue) => {
    if (oldValue!=newValue) {
      data.backcolor = store.thems?.dark?"45,45,45":"255,255,255"
    }  
  },
  { deep: true,immediate: true }
)

onMounted(() => {
  getwindow_size()
  on_refresh()
}); 
</script>

<template>
    <div class="comic_read  page_up"  :style="store.thems?.menu_left?'height:calc(100vh - 110px);':''">
       <div class="xiaoshou" style="position: absolute;bottom: 20px;z-index: 999;width: 100%;text-align: center;" v-show="data.down_icon" @click="go_down">
         <n-icon size="24" class="down_icon"><ChevronDownOutline /></n-icon>
       </div>
       <div class="banner">
        <img :src="data.eps.cover" fit="cover" style="object-fit:cover;border-radius: 5px;width:100%;height: 100%;filter: blur(15px);" lazy>
          
       </div>
       <div class="eps_con" :style="'background-color: rgb('+data.backcolor+','+data.opt+');'" >
        <div class="title" style="margin-bottom: 10px;position: absolute;top:10px;right: 10px;" v-if="data.innerWidth>400">
          <n-tag round :bordered="false" size="large" style="backdrop-filter: blur(20px);">
            <n-ellipsis :line-clamp="1" style="max-width: 400px;">
                  {{data.eps.name}}
            </n-ellipsis>
            <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon size="16"><EaselOutline /></n-icon></n-avatar></template>
          </n-tag>
        </div>
        <n-scrollbar ref="list_ref" style="max-height: calc(100vh - 50px);"   :style="store.thems?.menu_left?'max-height: calc(100vh - 110px);':''" trigger="none" :on-scroll="on_scroll" >
        <div style="display: flex;height: 200px;margin-top: 340px;">
          <div style="margin-left: 10px;">
            <img :src="data.eps.cover" fit="cover" style="border-radius: 5px;width:auto;height: 100%;" lazy>
          </div>
          <div style="margin-left:10px;">
            <div style="width: 60%;height: 110px;margin-top:5px;font-size: 23px;">
              <n-ellipsis :line-clamp="3" >
                {{data.eps.name}}
              </n-ellipsis>
            </div>
            <div style="width: 100%;height: 40px;">作者：{{data.eps.author}}</div>
            <div class="fav" style="width: 100%;height: 30px;"  @click="on_fav(data.eps.id)">
              <n-button tertiary circle type="primary" style="backdrop-filter: blur(20px);"  >
                <template #icon>
                  <n-icon size="22" v-if="data.eps.fav_state==1"><HeartSharp /></n-icon>
                  <n-icon size="22" v-else><HeartOutline /></n-icon>
                </template>
              </n-button>
            </div>
          </div>
        </div>
        <div style="padding: 10px;">
        <n-card class="card_new"  :bordered="false"  header-style="padding:0" content-style="padding:0">
          <template #header>
          <div class="card_header" style="backdrop-filter: blur(10px);">
            <n-icon size="20"><LogoStackoverflow /></n-icon>
            <div class="title">相关剧集</div>
            <div class="btn">
              <div class="benzi_ep_one" style="display: flex;align-items: center;">
                <n-button  style="color: #fff;" type="primary" @click="on_read(data.ep_firstid)">
                  <n-icon size="20"><CaretForwardCircleOutline /></n-icon>&nbsp;{{data.his_name}}
                </n-button>
              </div>
            </div>
          </div>
        </template>
          <div class="card_body">
            <n-scrollbar  :style="data.ep_count>3?'max-height:120px;':'max-height:200px;'"  trigger="none">
              <n-grid cols="3 200:2 600:3 800:3" :x-gap="10" :y-gap="0">
                  <n-grid-item v-for="item in data.eps.ep_list">
                    <div class="benzi_ep_one"  @click="on_select_ep(item.id)">
                            <n-image :src="item.cover" style="margin-right: 10px;" width="60" height="40" object-fit="cover" class="tx" preview-disabled/> 
                            {{item.name}}
                          </div>
                  </n-grid-item> 
              </n-grid>
          </n-scrollbar>
          </div>
        </n-card>
        <n-card class="card_new" style="margin-top: 20px; " :bordered="false"  header-style="padding:0" content-style="padding:0">
          <div class="card_header" style="backdrop-filter: blur(10px);">
            <n-icon size="20"><NewspaperOutline /></n-icon>
            <div class="title">本作介绍</div>
          </div>
          <div class="card_body" :style="data.ep_count>3?'min-height:140px;':'min-height:150px;'" >
              <span class="tag_span" v-for="item in data.eps.tags" :key="item">{{item}}</span>
              <br>{{data.eps.name}}
              <br>{{data.eps.description}}
          </div>
        </n-card>
        </div>
      </n-scrollbar>
      </div>
    </div>

    <n-drawer v-model:show="data.drawer" height="100%" placement="bottom"  z-index="99999999999" :on-after-leave="on_close">
      <n-drawer-content style="padding: 0;margin: 0;">
        <Comic :data="data" v-if="data.type==1" ref="ref_comic"/>
        <Video :data="data"  v-if="data.type==2" ref="ref_video" />
        <Animes :data="data" v-if="data.type==3" ref="ref_animes" />
      </n-drawer-content>
    </n-drawer>

</template>

<style lang="scss" scoped>
.comic_read{
  padding: 0px;
  height: calc(100vh - 52px);
  position: relative;
  .down_icon{
    padding: 15px 20px;
    background-color: rgb(0,0,0,0.3);
    border-radius: 3px;
    animation-duration: 1s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    backdrop-filter: blur(20px);
  }
  .banner{
    background-size: cover;
    background-repeat: repeat;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    z-index: -1;
    

  }
  .eps_con{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 10;
    border-radius: 0;
    // background: linear-gradient(to bottom,rgb(0, 0, 0,0.5), rgb(0, 0, 0,1));
    background-color: rgb(0,0,0,0.1);
    
    .fav span{
          color:#eaecee;
          font-size: 14px;
          background:var(--background-color—hover—hover);
          text-align: center;
          border-radius: 5px;
          cursor:pointer;
          padding: 5px 15px;
      }
    .eps{
      max-height: 180px;
      overflow: hidden;
    }
    .benzi_ep_one{
      padding: 5px 5px;
      display: flex;
      text-align: left;
      align-items: center;
      padding:0;
      cursor:pointer;
      border-radius: 5px;
      margin:5px 0px;
      line-height: 18px;
      font-size: 12px;
      background:rgb(255,255,255,0.1);
      .tx{
 
        margin: 5px;
        border-radius: 3px;
      }
  } 
 
  }
}
.tag_span{
        color:#fff;
        background:rgb(255,255,255,0.1);
        padding: 3px 8px;
        margin-right: 4px;
        border-radius: 5px;
        display: inline-block;
        margin-bottom: 10px;
}
.card_header{
      // height:40px;
      display: flex;
      align-items: center;
      font-size: 14px ;
      padding: 10px;
      height: 60px;
      background-color: rgb(255,255,255,0.01);
      span{
        font-size: 12px;
      }
      .title{
        line-height: 20px;
        margin:0 5px;
      }
      .btn{
        margin-left: auto;margin-right: 0;
      }
      &.active,&:hover {
        // background-color: var(--el-bg-color-overlay-hover);
      }
  }
.card_body{
  padding: 10px 10px !important;
  padding-bottom: 0;
  border-top: 1px solid var(--hover1);
}
.light-mode {
  .down_icon{
    background: var(--light-hover-deep2) ;
  }
  .card_body{
    padding: 10px 10px !important;
    padding-bottom: 0;
    border-top: 1px solid #b7b4b4c8;
    // background-color: rgb(255,255,255,0.01);
  }
.tag_span{
  color:#000 !important;
  background-color: var(--light-hover-deep) !important;
}
.fav span{
      color:#000 !important;
      background-color: var(--light-hover-deep2) !important;
  }
  .benzi_ep_one{
    background-color: var(--light-hover-deep2) !important;
  } 
}

</style>